插件系統

先來聊聊何謂「插件系統」，就是利用一個 context 物件攜帶相關方法資訊，進而去觸動主程式去執行某些行為。常見有插件系統的各種套件，諸如 webpack, rollup, eslint, vue... 等等，他們自帶這些插件行為方便對套件功能進行擴充。

插件系統的基本實作

首先會有一套實作核心系統的主體，他負責主功能和實現插件細節。

// context.js
export class Context {
  current = undefined,
  plugins = [];
  use(plugin) {
    const context = {
      getState: () => this.current,
      setState: (value) => {
        this.current = value;
      },
    }
    this.plugins.push(plugin(context));
  }
  getState() {
    return this.current
  }
}

再來會有一包低階的組件，他基於主體 context.js 去延展，以低耦合的方式滿足功能。

// plugin.js
const value = {};

export const plugin = (context) => {
  if (context.getState() !== value) {
    context.setState(value);
  }
};

最後會有一個核心的耦合點，把 context 和 plugin 都引入進行使用。

import { Context } from "./context";
import { plugin } from "./plugin";

const context = new Context();
context.use(plugin);
const state = context.getState();

插件系統跟微前端有什麼關係？

許多初次建置微前端的人還沒有「插件」系統的概念，所以常常困擾於依賴的關聯性。但你可以思考，如果你的應用程式主系統架構是 context，而微前端應用是 plugin，那耦合行為就會顯得明朗很多。或許你開始會理解微前端對於一個主程式是應用什麼樣的概念在建構，互許你就能慢慢發現這概念能夠對於程式建構上更有幫助。